<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>一天零一页</title>
		<link rel="shortcut icon" type="image/x-icon" href="./static/images/icon.png" media="screen" />
		<link rel="stylesheet" href="./static/css/bootstrap.min.css">
		<script src="./static/js/jquery-3.2.1.min.js"></script>
		<script src="./static/js/bootstrap.min.js"></script>
		<script src="./static/js/axios.min.js"></script>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#bg:after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,.4);
				z-index: 1;
			}/*给背景图片设置蒙版*/
			body {
				font: 14px/1.5 微软雅黑, arial, sans-serif;
				width: 100%;
				overflow: scroll;
			}
			#header {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 66px;
				color: #fff;
				z-index: 9999;
				transition: all .3s;
			}/*设置页眉*/
			#header nav {
				position: relative;
				width: 80%;
				margin: 0 auto;
			}
			ul {
				list-style: none;
			}/*去掉列表样式*/
			#header nav li {
				border: 0;
				display: inline-block;
				height: 66px;
				line-height: 66px;
				font-size: 16px;
				position: relative;
				cursor: pointer;
			}
			#header nav li a {
				display: inline-block;
				padding: 0 12px;
				white-space: nowrap;
				color: #fff;
			}
			a {
				text-decoration: none;
			}/*去掉链接下划线*/
			#bg {
				position: relative;
				background: url("../images/296494-106.jpg") no-repeat gray;
				background-size: cover;
			}/*设置背景图片*/
			#bg p {
				position: relative;
				padding: 95px 0 70px;
				color: hsla(0,0%,100%,.9);
				text-align: center;
				font-size: 26px;
				line-height: 2;
				z-index: 2;
				letter-spacing: 2.5px;
				text-shadow: 0 3px 25px rgba(0,0,0,.3);
				cursor: progress;
				padding-top: 210px;
				padding-right: 0px;
				padding-bottom: 210px;
				padding-left: 0px;
			}/*设置文字属性*/
			#bg p i {
				text-decoration: line-through;
				font-size: 20px;
				color: hsla(0,0%,100%,.8);
				text-shadow: 0 0 0 transparent;
				font-style: normal;
			}/*设置第二行文字属性*/
			#header nav figure
			{
				background:url("");
				height: 50px;
				width: 50px;
				background-size:cover ;

			}
			#header nav .my-info {
				position: absolute;
				top: 8px;
				right: 0;
			}
			figure {
				display: block;
				-webkit-margin-before: 1em;
				-webkit-margin-after: 1em;
				-webkit-margin-start: 40px;
				-webkit-margin-end: 40px;
				border-radius:100px;
			}
			#header nav span {
				font-size: 18px;
				margin: 0 10px;
			}
			#header nav figure, #header nav span {
				display: inline-block;

				vertical-align: middle;
			}

			#copyright {
				position: absolute;
				top: 0;
				left: 0;
				background: #0e0e0e;
				width: 100%;
				height: 100%;
				transform-origin: 100% 0;
				transition: all .5s;
				z-index: 2;
			}
			#copyright p {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				line-height: 2;
			}
			#footer {
				position: relative;
				height: 160px;
				border-top: 1px solid #eee;
				color: hsla(0,0%,100%,.69);
				font-size: 12px;
				text-align: center;
				border-top: 2px dashed #98b7ff;
				transition: height .1s 1s;
			}
			#hiddenewm p{
				color: #444;
			}
			#hiddenewm
			{
				background: #fff;
				text-align: center;
				position: absolute;
				left: 25px;
				top: 70px;
			}
			#container {
				position: relative;
				max-width: 95%;
				margin: 0 auto;
			}
			.article {
				box-shadow: 5px 5px 25px #dadada;
				position: relative;
				padding: 0 20px;
				margin: 40px auto;
				max-width: 950px;
				background: #fff;
				text-align: center;
			}
			.article>time {
				position: absolute;
				top: 0;
				left: 0;
				border-bottom: 1px solid #ccc;
				font-size: 14px;
				padding: 4px 5px 0;
				color: #999;
			}
			.article h2 {
				padding-bottom: .5em;
				font-size: 1.75em;
				line-height: 1.225;
			}
			.article>h2 {
				padding: 35px 0 45px;
				font-size: 22px;
				font-weight: 700;
				cursor: pointer;
			}
			#container a {
				color: #333;
			}
			.article>span {
				position: absolute;
				top: 0;
				right: 0;
				color: #999;
				padding: 3px 10px;
				background: #f1f1f1;
				font-size: 14px;
			}
			.article section {
				text-align: left;
				padding: 10px;
				font-size: 16px;
			}
			.article blockquote {
				padding: 0 15px;
				color: #777;
				border-left: 4px solid #ddd;
			}
			.article footer {
				padding: 25px 0 20px;
			}
			.article footer a {
				display: inline-block;
				color: #18bc9c;
				cursor: pointer;
				padding: 4px 20px;
				border-radius: 5px;
				transition: all .5s;
				border: 1px solid #18bc9c;
			}
			#pagebar{
				text-align: center;
			}
			#bg {
				position: relative;
				background: url("./static/images/296494-106.jpg") no-repeat gray;
				background-size: cover;
			}/*设置背景图片*/
			
			.article {
				width: 32.333%; /* 确保三列占据同一行 */
				box-sizing: border-box;
				padding: 10px;
				background: #fff;
				box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        	}
			.article-row {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
        	}
		</style>
	</head>
	<body background="./static/images/bg.png" >
		<div>
			<header id="header">
				<nav>
					<ul>
						<li>
							<a href="/" style="color:#AB82FF">首页</a>
							<a href="/about" style="color:#AB82FF">关于</a>
						</li>
					</ul>
					<div class="my-info" onmouseover="hiddeewm()" onmouseout="hiddeewm()">
						<figure>
							<img src="./static/images/nopict.jpg" width="50px" height="50px"/>
						</figure>
						<span style="color:#AB82FF">一天零一页</span>
					</div>
				</nav>
			</header>
			<div id="bg" >
				<p>
					和所有以梦为马的诗人一样
					<br />
					
					<i>岁月易逝 一滴不剩</i>
				</p>
			</div>
		</div>
		<div id="container">
			<div id="article-container"></div>
			<div id="pagination-container" style="text-align: center"></div>
		</div>
		<footer id="footer">
			<section id="copyright">
				<p style="font-size: 20px">
					<a href="/jsp/admin/" style="color: whitesmoke;"> © </a>2018 <a href="/">一天零一页</a>
				</p>
			</section>
		</footer>

		<script>
			// 初始化页面
			document.addEventListener("DOMContentLoaded", () => {
				loadArticles();
			});

			// 模拟数据
			const mockData = {
				articles: [
					{
						id: 1,
						localTime: "2024-10-10 10:00:00",
						title: "第一篇文章标题",
						keywords: "关键词1",
						desci: "第一篇文章简介..."
					},
					{
						id: 2,
						localTime: "2024-10-11 10:00:00",
						title: "第二篇文章标题",
						keywords: "关键词2",
						desci: "第二篇文章简介..."
					},
					{
						id: 3,
						localTime: "2024-10-12 10:00:00",
						title: "第三篇文章标题",
						keywords: "关键词3",
						desci: "第三篇文章简介..."
					},
					{
						id: 4,
						localTime: "2024-10-13 10:00:00",
						title: "第四篇文章标题",
						keywords: "关键词4",
						desci: "第四篇文章简介..."
					},
					{
						id: 5,
						localTime: "2024-10-14 10:00:00",
						title: "第五篇文章标题",
						keywords: "关键词5",
						desci: "第五篇文章简介..."
					},
					{
						id: 6,
						localTime: "2024-10-15 10:00:00",
						title: "第六篇文章标题",
						keywords: "关键词6",
						desci: "第六篇文章简介..."
					}
				],
				pageInfo: {
					pageNum: 1,
					pages: 2,
					total: 6
				}
			};

			// 加载文章数据
			function loadArticles() {
				const data = mockData;
				displayArticles(data.articles, data.pageInfo);
			}

			// 显示文章列表和分页
			function displayArticles(articles, pageInfo) {
				const articleContainer = document.getElementById("article-container");
				articleContainer.innerHTML = "";

				articles.forEach(article => {
					articleContainer.innerHTML += `
						<article class="article">
							<time>${article.localTime}</time>
							<h2 class="title"><a href="article?id=${article.id}">${article.title}</a></h2>
							<span><i>${article.keywords}</i></span>
							<section class="article-content markdown-body">
								<blockquote>
									<p>${article.desci}</p>
								</blockquote>
							</section>
							<footer>
								<a href="article?id=${article.id}">阅读全文</a>
							</footer>
						</article>
					`;
				});

				// 动态生成分页
				const paginationContainer = document.getElementById("pagination-container");
				paginationContainer.innerHTML = `
					<ul class="pagination">
						<li class="${pageInfo.pageNum === 1 ? 'disabled' : ''}">
							<a href="#" onclick="loadArticles(${pageInfo.pageNum - 1})">&laquo;</a>
						</li>
						${generatePageNumbers(pageInfo)}
						<li class="${pageInfo.pageNum === pageInfo.pages ? 'disabled' : ''}">
							<a href="#" onclick="loadArticles(${pageInfo.pageNum + 1})">&raquo;</a>
						</li>
					</ul>
				`;
			}

			// 生成页码按钮
			function generatePageNumbers(pageInfo) {
				let pageNumbers = '';
				for (let i = 1; i <= pageInfo.pages; i++) {
					pageNumbers += `
						<li class="${pageInfo.pageNum === i ? 'active' : ''}">
							<a href="#" onclick="loadArticles(${i})">${i}</a>
						</li>
					`;
				}
				return pageNumbers;
			}
		</script>
	</body>
</html>